<template>
  <div class="mainContent">
    <div class="upSpan">
      <div v-for="(item, index) in priority" :key="index">
        <span> {{ item }}：</span>

        <el-input-number
          size="small"
          v-model="num[index]"
          controls-position="right"
          @change="(val) => handleChange(val, index)"
          :min="1"      
          :max="8"
        ></el-input-number>
      </div>
    </div>
    <div class="tips">注：优先级从1-8逐级降低</div>
    <div class="buttons">
      <button>保 存</button>
      <button>取 消</button>
    </div>
  </div>
</template>
<script setup>
import { ref } from "vue";
const num = ref(Array(8).fill(""));
const priority = ref([
  "主 机 寻 呼",
  "播 放 钟 声",
  "主 机 告 警",
  "定 时 节 目",
  "消 防 告 警",
  "广 播 节 目",
  "设 备 间 寻 呼",
  "点 播 节 目",
]);
const handleChange = (val, index) => {
  console.log(val, index);

};
</script>
<style lang="less" scoped>
@import url(./priority_setting.less);
</style>